// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.report-form {
  @_padding: 15px;
  @_form-color: @osu-colour-b4;
  @_background-color: @osu-colour-b5;

  font-size: @font-size--title-small;
  color: #fff;

  .default-border-radius();

  padding: 30px @_padding @_padding;

  display: flex;
  flex: 0 1 400px;
  flex-direction: column;

  background-color: @_form-color;

  @media @mobile {
    // force content to fit into window, especially the dropdown.
    max-width: 100vw;
  }

  &__button {
    .reset-input();
    .default-text-shadow();

    position: relative;
    padding: @_padding;
    width: 200px;
    background-color: @osu-colour-b5;
    border-radius: 200px;
    font-weight: 600;

    &[disabled] {
      &::before {
        .full-size();
        content: "";
        border-radius: inherit;
        background-color: fade(#000, 50%);
      }
    }

    &:focus,
    &:hover,
    &:active {
      background-color: @osu-colour-b6;
    }

    & + & {
      margin-top: 8px;
    }

    &--report {
      background-color: @red-dark;

      &:focus,
      &:hover,
      &:active {
        background-color: @red;
      }
    }
  }

  &__header {
    margin-bottom: 10px;
    font-size: @font-size--title;
  }

  &__row {
    display: flex;
    justify-content: center;

    & + & {
      margin-top: 10px;
      &--buttons {
        margin-top: 15px;
      }
    }

    &--buttons {
      flex-direction: column;
      align-items: center;
    }

    &--exclamation {
      font-size: @font-size--large-2;
    }

    &--title {
      font-weight: 300;
    }
  }

  &__textarea {
    .reset-input();
    .default-border-radius();
    padding: @_padding;
    font-size: @font-size--normal;
    width: 100%;
    height: 200px;
    max-height: 400px; // don't resize too much...
    min-height: 100px;
    resize: vertical;

    background-color: @_background-color;

    &::placeholder {
      color: @osu-colour-f1;
    }
  }
}
